<template>
    <div ref="echarts">
    </div>
</template>

<script>
import * as echart from 'echarts'
    export default {
        props:{
            isAxischart:{
                type:Boolean,
                default:true
            },
            chartDate:{
                type:Object,
                default(){
                    return{
                        xData:[],
                        series:[]
                    }
                }
            }
        },
        watch:{
            chartDate:{
                handler:function(){
                    this.initChart()
                },
                deep:true
            }
        },
        methods: {
            initChart() {
                this.initChartData()
                if(this.echart){
                    this.echart.setOption(this.Options)
                }else{
                    this.echart=echart.init(this.$refs.echarts)
                    this.echart.setOption(this.Options)
                }
            },
            initChartData(){
                if(this.isAxischart){
                    this.axisOption.xAxis.data=this.chartDate.xData
                    this.axisOption.series=this.chartDate.series
                }else{
                    this.normalOption.series=this.chartDate.series
                }
            }
        },
        data() {
            return {
                axisOption:{
                               textStyle:{
                                   color:'#333',
                               },
                           grid:{
                               left:'20%',
                           },
                           tooltip:{
                               trigger:'axis'
                           },
                           xAxis:{
                               type:'category',
                               data:[],
                               axisLine:{
                                   lineStyle:{
                                       color:'#17b3a3'
                                   },
                               },
                               axisLable:{
                                   interval:0,
                                   color:'#333',
                               },
                           },
                           yAxis:[
                               {
                                   type:'value',
                                   axisLine:{
                                       lineStyle:{
                                           color:'#17b3a3'
                                       },
                                   },
                               },
                           ],
                           color:['#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80','#8d98b3'],
                           series:[],
            },
            normalOption:{
                tooltip:{
                        trigger:'item',
                    },
                    color:[
                        '#0f78f4',
                        '#dd536b',
                        '#9462e5',
                        '#a6a6a6',
                        '#e1bb22',
                        '#39c362',
                        '#3ed1cf'
                    ],
                    series:[]
            },
            echart:null
        }
        },
        computed: {
            Options(){
                return this.isAxischart?this.axisOption:this.normalOption
            }
        },
        mounted () {
            console.log(this.chartDate)
        },
    }
</script>

<style lang="scss" scoped>

</style>